<template>
  <div class="pageContent">
    <div class="contentAll">
      <el-form :inline="true" :model="formInline" class="formALL">
        <el-form-item>
          <el-input style="width: 180px;" v-model="formInline.name" placeholder="医生姓名" clearable />
        </el-form-item>
        <el-form-item>
          <el-input style="width: 180px;" v-model="formInline.mobile" placeholder="手机号" clearable />
        </el-form-item>

        <el-form-item>
          <el-select v-model="formInline.lineType" placeholder="线上/线下" clearable style="width: 180px;">
            <el-option label="线上" value="0" />
            <el-option label="线下" value="1" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select v-model="formInline.of_internet_hospital" placeholder="所属互联网医院" clearable style="width: 180px;">
            <el-option v-for="(item, index) in hospitalList" :key="index" :label="item.name" :value="index" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select v-model="formInline.is_consultant" placeholder="是否为会诊医生" clearable style="width: 180px;">
            <el-option label="是" value="1" />
            <el-option label="否" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formInline.is_examine" placeholder="CA认证" clearable style="width: 180px;">
            <el-option label="审核中" value="2" />
            <el-option label="已通过" value="1" />
            <el-option label="未通过" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formInline.status" placeholder="状态" clearable style="width: 180px;">
            <el-option label="启用" value="1" />
            <el-option label="停用" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formInline.internet_hospital" placeholder="请选择MCN机构" clearable style="width: 180px;">
            <el-option v-for="(item, index) in mechanismList" :key="index" :label="item.name" :value="index" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formInline.defaultHospital" placeholder="默认互联网医院" clearable style="width: 180px;">
            <el-option v-for="(item, index) in defaultHospitalList" :key="index" :label="item.name" :value="index" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="screenClick">筛选</el-button>
          <el-button @click="ResetClick">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="buttonAll">
        <el-button type="primary" @click="screenClick">导出</el-button>
        <router-link to="/docterAdd" style="margin-left: 6px;"><el-button type="success" @click="ResetClick">新增</el-button></router-link>
      </div>
      <!-- <el-card class="custom-card">
        <el-table :data="tableData">
          <el-table-column prop="date" label="ID" />
          <el-table-column prop="name" label="头像" />
          <el-table-column prop="state" label="医生姓名" />
          <el-table-column prop="city" label="手机号" />
          <el-table-column prop="address" label="所属MCN机构" />
          <el-table-column prop="zip" label="线上/线下" />
          <el-table-column prop="zip" label="所属医院" />
          <el-table-column prop="zip" label="归属平台" />
          <el-table-column prop="zip" label="所属互联网医院" />
          <el-table-column prop="zip" label="默认互联网医院" />
          <el-table-column prop="zip" label="科室" />
          <el-table-column prop="zip" label="是否会诊医生" />
          <el-table-column prop="zip" label="线上出诊权重" />
          <el-table-column prop="zip" label="患者是否可见" />
          <el-table-column prop="zip" label="状态" />
          <el-table-column prop="zip" label="CA认证" />
          <el-table-column fixed="right" label="操作" width="120">
            <template #default>
              <el-menu :default-active="menuIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false">
                <el-sub-menu index="0">
                  <template #title>操作</template>
                  <el-menu-item index="2-1">item one</el-menu-item>
                  <el-menu-item index="2-2">item two</el-menu-item>
                  <el-menu-item index="2-3">item three</el-menu-item>
                </el-sub-menu>
              </el-menu>
            </template>
          </el-table-column>
        </el-table>
        <div class="demo-pagination-block">
          <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
            :page-sizes="[100, 200, 300, 400]" :small="small" :disabled="disabled" :background="background"
            layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div>
      </el-card> -->
    </div>
  </div>
</template>

<script>
  import {
    ref,
    reactive,
    toRaw
  } from 'vue'
  export default {
    name: 'FileUpload',
    setup() {
      // 获取实例的引用，用于调用upload1.submit进行手动上传
      const formInline = reactive({})
      const queryParams = ref({})
      const mechanismList = ref([])
      const hospitalList = ref([])
      const defaultHospitalList = ref([])
      const menuIndex = ref('0')
      const currentPage = ref(4)
      const pageSize = ref(100)
      const small = ref(false)
      const background = ref(false)
      const disabled = ref(false)

      const handleSizeChange = (val) => {
        console.log(`${val} items per page`)
      }
      const handleCurrentChange = (val) => {
        console.log(`current page: ${val}`)
      }




      const screenClick = () => {
        console.log('submit!', toRaw(formInline))
      }
      const ResetClick = () => {
        for (let key in formInline) {
          formInline[key] = '';
        }
      };
      const tableData = [{
          date: '2016-05-03',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036',
          tag: 'Home',
        },
        {
          date: '2016-05-02',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036',
          tag: 'Office',
        },
        {
          date: '2016-05-04',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036',
          tag: 'Home',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036',
          tag: 'Office',
        },
      ]

      return {
        formInline,
        queryParams,
        mechanismList,
        hospitalList,
        defaultHospitalList,
        tableData,
        screenClick,
        ResetClick,
        currentPage,
        pageSize,
        small,
        background,
        disabled,
        handleSizeChange,
        handleCurrentChange
      }
    },
  }
</script>

<style lang="scss" scoped>
  .contentAll{
    padding: 15px ;
  }
  .custom-card {
    width: 100%;
    max-width: 1100px;
  }

  .buttonAll {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
  }

  .el-card {
    box-shadow: none;
  }

  .table-container {
    overflow-x: auto;
  }

  .upload-demo {
    display: flex;

    >* {
      position: relative;
      flex: 1;
      padding: 5px 20px;
      margin: 10px;
      background-color: white;
    }
  }

  .demo-pagination-block {
    margin: 20px 0;
    display: flex;
    justify-content: center;
  }

  .demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
  }

  .demo-pagination-block .demonstration {
    margin-bottom: 16px;
  }

  @media screen and (max-width: $sm-width) {
    .upload-demo {
      flex-direction: column;
    }
  }
</style>